<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/common.css" />
		<style>
			body {
				margin: 0px;
				padding: 0px;
				background-color: #eff0f1;
			}

			/* nav */
			.nav {

				display: flex;
				justify-content: start;
				align-items: center;
				height: 64px;
				position: relative;
				box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .06);
				padding-left: 16px;
				padding-right: 20px;
				background-color: #fff;
			}

			.back-btn {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 100%;
				margin-right: 15px;
			}

			.approval-title {
				width: calc(50% - 310.5px);
			}

			.approval-name {
				font-weight: 500;
				font-size: 16px;
				white-space: nowrap;
				cursor: pointer;
				width: -webkit-fit-content;
				width: -moz-fit-content;
				width: fit-content;
				max-width: 100%;
				height: 24px;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.tab-list {
				margin-left: 10px;
				flex-shrink: 0;
				display: flex;
				justify-content: center;
			}

			.tab-list .tab-list-item {
				font-family: PingFang SC, Microsoft YaHei;
				font-size: 18px;
				line-height: 28px;
				color: #646a73;
				margin-right: 42px;
				padding: 18px 0;
				border-bottom: 2px solid transparent;
				cursor: pointer;
			}

			.tab-list .tab-list-item .counter {
				display: inline-block;
				margin-right: 6px;
				width: 24px;
				height: 24px;
				border-radius: 50%;
				border: 1px solid #646a73;
				font-size: 16px;
				line-height: 22px;
				text-align: center;
			}

			.tab-list .tab-list-item-active {
				border-bottom-color: #3370ff;
				color: #3370ff;
				font-weight: 500;
			}

			.tab-list .tab-list-item-active .counter {
				border-color: #3370ff;
				background-color: #3370ff;
				color: #fff;
				font-weight: 400;
			}

			.nav-right {
				flex: 1 1;
				flex-shrink: 0;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				position: relative;
				height: 100%;
				width: fit-content;

			}

			.nav-right .primary {
				margin-left: 10px;
			}

			/* nav end */
			.box {
				margin: 0 auto;
				padding: 24px 0;
				height: 100%;
				text-align: center;
				overflow-y: auto;

				position: relative;
			}

			.panel {
				display: inline-block;
				padding: 24px 288px;
				background-color: #fff;
				text-align: left;
			}

			.form-item {
				position: relative;
				display: block;
				margin-bottom: 24px;
			}

			.form-item-label {
				margin-bottom: 8px;
				font-family: PingFang SC, Microsoft YaHei;
				font-size: 14px;
				line-height: 20px;
				color: #1f2329;
			}

			.required {
				color: red;
			}
			
			.form-item .form-item-content{
				font-family: PingFang SC, Microsoft YaHei;
			}

			.form-item .form-item-content .logo {
				width: 48px;
				height: 48px;
				border-radius: 50%;
				overflow: hidden;
			}

			.logo-selector {
				display: flex;
				align-items: center;
			}

			.logo-selector .logo img {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<div class="back-btn">
				<span>
					<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
						data-icon="LeftOutlined">
						<path
							d="M16.293 2.293a1 1 0 0 1 0 1.414L8 12l8.293 8.293a1 1 0 0 1-1.414 1.414l-8.293-8.293a2 2 0 0 1 0-2.828l8.293-8.293a1 1 0 0 1 1.414 0Z"
							fill="currentColor"></path>
					</svg> </span>
			</div>
			<div class="approval-title">
				<div class="approval-name">收款单</div>
			</div>
			<div class="tab-list">
				<div class="tab-list-item tab-list-item-active">
					<span class="counter">1</span>
					<span>基础信息</span>
				</div>
				<div class="tab-list-item">
					<span class="counter">2</span>
					<span>表单设计</span>
				</div>
				<div class="tab-list-item">
					<span class="counter">3</span>
					<span>流程设计</span>
				</div>
				<div class="tab-list-item">
					<span class="counter">4</span>
					<span>更多设置</span>
				</div>
			</div>
			<div class="nav-right">
				<button class="fz-btn">预览</button>
				<button class="fz-btn primary">发布</button>
			</div>
		</div>

		<div class="box">
			<div class="panel">
				<div class="form-item">
					<div class="form-item-label">图标 <span class="required">*</span></div>
					<div class="form-item-content">
						<div class="logo-selector">
							<div class="logo">
								<img src="https://lf-package-cn.feishucdn.com/obj/feishu-static/ee/approval/approval-admin/image/iconLib/v3/person.png"
									alt="" />
							</div>
							<button style="margin-left: 10px;">修改</button>
						</div>

					</div>
				</div>
				<div class="form-item">
					<div class="form-item-label">名称 <span class="required">*</span></div>
					<div class="form-item-content">
						<input type="text" placeholder="名称" class="eic-input"/>
					</div>
				</div>
				<div class="form-item">
					<div class="form-item-label">说明</div>
					<div class="form-item-content">
						<input type="text" placeholder="说明" class="eic-input"/>
					</div>
				</div>
				<div class="form-item">
					<div class="form-item-label">分组 <span class="required">*</span></div>
					<div class="form-item-content">
						<select class="eic-input"></select>
					</div>
				</div>
				<div class="form-item">
					<div class="form-item-label">谁可以提交该审批 <span class="required">*</span></div>
					<div class="form-item-content">
						<select class="eic-input" style="background-color: #fff;"></select>
					</div>
				</div>
				<div class="form-item">
					<div class="form-item-label"></div>
					<div class="form-item-content">
						<label>
							<input type="checkbox" />
							<span>是否将该审批展示在工作台</span>
						</label>
					</div>
				</div>
				<div class="form-item">
					<div class="form-item-label"></div>
					<div class="form-item-content">
						<label>
							<input type="checkbox" />
							<span>禁止企业管理员/审批应用管理员/子管理员 管理流程与数据</span>
						</label>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>